import React, { Component } from 'react'
import style from './user.module.scss';
import { Toast } from 'antd-mobile';
import { connect } from 'react-redux'

class User extends Component {
    render() {
        return (
            <div className={style.userBox}>
                {//d登录状态
                    this.props.islogin ? (//登录
                        <div className={style.jumpLoginBox} onClick={() => { this.props.history.push('/userinfo') }}>
                            <img className={style.userNologinImg} src={require('@/static/imges/headPortrait.webp')} alt="" />
                            <div className={style.jumpLoginBoxMiddle}>
                                <p className={style.userLoginOne}>{this.props.userInfo?.phone}</p>
                                <p className={style.userLoginTwo}>{this.props.userInfo?.code}</p>
                            </div>
                            <i className={'iconfont icon-jiantou ' + style.userLoginJiantou}></i>
                        </div>
                    ) : (//未登录
                            <div className={style.jumpLoginBox} onClick={() => { this.props.history.push('/login') }}>
                                <img className={style.userNologinImg} src={require('@/static/imges/usernologin.png')} alt="" />
                                <div className={style.jumpLoginBoxMiddle}>
                                    <p className={style.userLoginOne} >登录/注册</p>
                                    <p className={style.userLoginTwo}>登录后享受更多特权</p>
                                </div>
                                <i className={'iconfont icon-jiantou ' + style.userLoginJiantou}></i>
                            </div>
                        )
                }

                <div className={style.redEnvelopesBox}>
                    <div onClick={() => Toast.offline('尽请期待 !!!', 1.5)} className={style.redEnvelopes}>
                        <div className={style.redEnvelopesimgBox}><img className={style.goldcoinimg} src={require('@/static/imges/hongbao.png')} alt="" /></div>
                        <span>红包</span>
                    </div>
                    <div onClick={() => Toast.offline('尽请期待 !!!', 1.5)} className={style.goldCoin}>
                        <div className={style.goldCoinimgBox}><img className={style.goldcoinimg} src={require('@/static/imges/jinbi.png')} alt="" /></div>
                        <span>金币</span>
                    </div>
                </div>
                <p className={style.seizeASeat}></p>
                <div onClick={() => Toast.offline('尽请期待 !!!', 1.5)} className={style.userLi}>
                    <img className={style.imgSize} src={require('@/static/imges/site.png')} alt="" />
                    <span className={style.writtenWords}>我的地址</span>
                    <i className={'iconfont icon-jiantou ' + style.userLoginJiantouTwo}></i>
                </div>
                <p className={style.seizeASeat}></p>
                <div onClick={() => Toast.offline('尽请期待 !!!', 1.5)} className={style.userLi}>
                    <img className={style.imgSize} src={require('@/static/imges/shangdian.png')} alt="" />
                    <span className={style.writtenWords}>金币商店</span>
                    <i className={'iconfont icon-jiantou ' + style.userLoginJiantouTwo}></i>
                </div>
                <div onClick={() => Toast.offline('尽请期待 !!!', 1.5)} className={style.userLi}>
                    <img className={style.imgSize} src={require('@/static/imges/liwu.png')} alt="" />
                    <span className={style.writtenWords}>分享拿20元现金</span>
                    <i className={'iconfont icon-jiantou ' + style.userLoginJiantouTwo}></i>
                </div>
                <p className={style.seizeASeat}></p>
                <div onClick={() => Toast.offline('尽请期待 !!!', 1.5)} className={style.userLi}>
                    <img className={style.imgSize} src={require('@/static/imges/kefu.png')} alt="" />
                    <span className={style.writtenWords}>我的客服</span>
                    <i className={'iconfont icon-jiantou ' + style.userLoginJiantouTwo}></i>
                </div>
                <div onClick={() => Toast.offline('尽请期待 !!!', 1.5)} className={style.userLi}>
                    <img className={style.imgSize} src={require('@/static/imges/download.png')} alt="" />
                    <span className={style.writtenWords}>下载饿了么APP</span>
                    <i className={'iconfont icon-jiantou ' + style.userLoginJiantouTwo}></i>
                </div>
                <div onClick={() => Toast.offline('尽请期待 !!!', 1.5)} className={style.userLi}>
                    <img className={style.imgSize} src={require('@/static/imges/guize.png')} alt="" />
                    <span className={style.writtenWords}>规则中心</span>
                    <i className={'iconfont icon-jiantou ' + style.userLoginJiantouTwo}></i>
                </div>
            </div>
        )
    }
}

const stateToProps = (state) => {
    // console.log(state, 456456456);
    return {
        islogin: state.user.isLogin,
        userInfo: state.user.userInfo
    }
}

const dispatchToProps = (dispatch) => {
    return {
    }
}


export default connect(stateToProps, dispatchToProps)(User)
